<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="search.customReportInfo"
        v-haspermi="['bxy:cilentlog:search']"
        :placeholder="$t('console.username')"
        class="filter-item"
        clearable
      />
      <el-date-picker
        v-model="datetimeRange"
        v-haspermi="['bxy:cilentlog:search']"
        type="datetimerange"
        :range-separator="$t('common.to')"
        :start-placeholder="$t('common.startTime')"
        :end-placeholder="$t('common.endTime')"
        class="filter-item"
      />
      <el-button v-haspermi="['bxy:cilentlog:search']" class="filter-item" type="primary" icon="el-icon-search" @click="refreshClientLog">{{
        $t('common.search')
      }}</el-button>
      <el-button v-haspermi="['bxy:cilentlog:delete']" class="filter-item" type="danger" @click="removeClientLog">{{
        $t('common.delete')
      }}</el-button>
    </div>

    <el-table
      :data="logs"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="changeSelectedLogs"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column
        type="index"
        :label="$t('common.num')"
        align="center"
        width="80"
      />
      <el-table-column
        property="deviceId"
        :label="$t('console.deviceId')"
        align="center"
        width="200"
      />
      <el-table-column
        property="username"
        :label="$t('console.username')"
        align="center"
        width="200"
      />
      <el-table-column
        property="logDateStr"
        :label="$t('console.logDate')"
        align="center"
        width="100"
      />
      <el-table-column
        property="addTimeStr"
        :label="$t('console.addTime')"
        align="center"
        width="180"
      />
      <el-table-column
        property="webSource"
        :label="$t('console.webSource')"
        align="center"
        width="100"
      />
      <el-table-column
        property="environment"
        :label="$t('console.environment')"
        align="center"
      />
      <el-table-column
        :label="$t('common.operate')"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            v-haspermi="['bxy:cilentlog:download']"
            icon="el-icon-download"
            class="oprate"
            size="mini"
            plain
            type="primary"
            @click.native.prevent="downloadLog(scope.row)"
          >{{ $t('common.download') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="search.page" :limit.sync="search.size" @pagination="pagination" />

  </div>
</template>

<script>
import { datetoISOString } from '@/utils/';
import { saveAs } from 'file-saver';
import log from '@/api/console';
import Pagination from '@/components/Pagination';

export default {
  name: 'ClientLog',
  components: { Pagination },
  data() {
    return {
      search: {
        beginTime: null,
        endTime: null,
        customReportInfo: null,
        page: 1,
        size: 10,
      },
      logs: [],
      total: 0,
      datetimeRange: [],
      selectedLogs: [],
    };
  },
  created() {
    this.refreshClientLog();
  },
  methods: {
    /**
     * 路由到添加页面
     */
    async downloadLog(row) {
      const params = { tasks: row.taskId };
      const res = await log.downloadClientLog(params);
      let filename = 'log';
      const content = res.headers['content-disposition'];
      const contentArr = content.split('=');
      if (contentArr.length > 1) {
        filename = contentArr[1].substring(1, contentArr[1].length - 1);
      }
      saveAs(new Blob([res.data]), filename);
      this.$message({
        message: this.$t('console.downloadSuccess'),
        type: 'success',
      });
    },
    // 重新加载用户数据
    refreshClientLog() {
      this.search.page = 1;
      this.getClientLog();
    },
    // 获取豆豆用户信息
    async getClientLog() {
      const param = {
        customReportInfo: this.search.customReportInfo,
        page: this.search.page,
        size: this.search.size,
      };
      if (this.datetimeRange && this.datetimeRange.length === 2) {
        param.beginTime = datetoISOString(this.datetimeRange[0]);
        param.endTime = datetoISOString(this.datetimeRange[1]);
      } else {
        this.search.beginTime = null;
        this.search.endTime = null;
      }
      const res = await log.getClientLog(param);
      res.data.forEach(element => {
        if (element.customReportInfo) {
          const customInfo = JSON.parse(element.customReportInfo);
          element.userId = customInfo.userId;
          element.username = customInfo.username;
        }
        element.addTimeStr = this.$moment(element.addTime).format('YYYY-MM-DD HH:mm:ss');
        element.logDateStr = this.$moment(element.logDate).format('YYYY-MM-DD');
      });
      this.logs = res.data;
      this.total = Number(res.headers['x-total-count']);
    },
    pagination() {
      this.getClientLog();
    },
    async removeClientLog() {
      if (this.selectedLogs.length <= 0) {
        this.$message(this.$t('console.pleaseSelectedLog'));
        return;
      }
      this.$confirm(this.$t('console.removeClientLogTips'), this.$t('common.tips'), {
        type: 'warning',
      }).then(async() => {
        const taskIds = [];
        this.selectedLogs.forEach(element => {
          taskIds.push(element.taskId);
        });      const param = {
          tasks: taskIds.toString(),
        };
        await log.removeClientLog(param);
        this.$message({
          message: this.$t('console.removeClientLogSuccessfully'),
          type: 'success',
        });
        this.getClientLog();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelRemove'),
        });
      });
    },
    changeSelectedLogs(val) {
      this.selectedLogs = val;
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getClientLog();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.getClientLog();
    },
  },
};
</script>

<style scoped>
.filter {
  display: flex;
  margin-left: 15px;
  margin-top: 15px;
  color: #333;
  font-size: 14px;
}
.department {
  margin-left: 15px;
}
.el-input {
  width: 250px;
}
.button {
  margin-left: 15px;
}
.table {
  width: 100%;
  margin-left: 10px;
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  padding: 0 20px 0;
  width: 100%;
  text-align: right;
}
</style>
